<template>
    <div>
      <div class="card card-custom gutter-b example example-compact" id="tableBody">
        <div class="card-header">
          <div class="card-title">
            <span class="card-icon">              
              <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
            </span>
            <h3 class="card-label"> 查询区域 </h3>
          </div>
          <div class="card-toolbar">
            <div class="example-tools justify-content-center">
              <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
              -->
            </div>
          </div>
        </div>
        <div class="card-body">
            <!--查询条件-->
            <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
              <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                <div class="m-form__actions m-form__actions--solid">
                  <div class="row">
                    <div class="col m--align-left">
                        <div class="form-group m-form__group row">                 
                            <label class="col-form-label">名称:</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" v-model="searchForm.name" placeholder="请输入">
                            </div>  
                            <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2" @click="search()"><span><i class="fa fa-search"></i><span>查询</span></span></b-button>
                            <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2"  @click="resetAll()"> <span><span>清空条件</span></span></b-button>
                        </div>        
                     
                    </div>
                    <div class="col m--align-right">
                        <button class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3" @click="addXtDataDictionary(0,0)">
                            <span><i class="la la-plus la-lg"></i><span>新建一级</span></span>
                        </button>   
                        <a class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3" href="javascript:void(0)" @click="toggleRowExpansion(false)">
                            <span class="svg-icon svg-icon-primary svg-icon-2">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,
                                    11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"/>
                                    <path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,
                                    15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,
                                    15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "/>
                                </g>
                            </svg><span>全部折叠</span></span>
                        </a>
                        <a class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3" href="javascript:void(0)" @click="toggleRowExpansion(true)">
                            <span class="svg-icon svg-icon-primary svg-icon-2">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <polygon points="0 0 24 0 24 24 0 24"/>
                                        <path d="M8.2928955,3.20710089 C7.90237121,2.8165766 7.90237121,2.18341162 8.2928955,1.79288733 C8.6834198,1.40236304 9.31658478,1.40236304 9.70710907,1.79288733 L15.7071091,
                                        7.79288733 C16.085688,8.17146626 16.0989336,8.7810527 15.7371564,9.17571874 L10.2371564,15.1757187 C9.86396402,15.5828377 9.23139665,15.6103407 8.82427766,15.2371482 C8.41715867,14.8639558 8.38965574,14.2313885 8.76284815,13.8242695 L13.6158645,8.53006986 L8.2928955,3.20710089 Z" fill="#000000" fill-rule="nonzero" 
                                        transform="translate(12.000003, 8.499997) scale(-1, -1) rotate(-90.000000) translate(-12.000003, -8.499997) "/>
                                        <path d="M6.70710678,19.2071045 C6.31658249,19.5976288 5.68341751,19.5976288 5.29289322,19.2071045 C4.90236893,18.8165802 4.90236893,18.1834152 5.29289322,17.7928909 L11.2928932,11.7928909 C11.6714722,11.414312 12.2810586,11.4010664 12.6757246,11.7628436 L18.6757246,17.2628436 C19.0828436,17.636036 19.1103465,
                                        18.2686034 18.7371541,18.6757223 C18.3639617,19.0828413 17.7313944,19.1103443 17.3242754,
                                        18.7371519 L12.0300757,13.8841355 L6.70710678,19.2071045 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(12.000003, 15.499997) scale(-1, -1) rotate(-360.000000) translate(-12.000003, -15.499997) "/>
                                    </g>
                                </svg><span>全部展开</span>
                            </span>          
                        </a>
                    </div>
                  </div>
                </div>
              </div>             
            </div>
        </div>
        <!--u-table分页组件-->
         <!-- 注意区别： 
            treeConfig：u-table大数据树形表格配置项，必去开启row-id 且 开启use-virtual 才有效的配置。
            而 tree-props 是基本树表格(即 雷同el_table)且是于row-key一起使用的。 

            use-virtual：开启虚拟表格
            row-id：注意区别：行数据的 id；在使用虚拟树表格时,该属性是必填的。而row-key是针对不是虚拟树表格时使用的。
            height：表格高度（不给高度，或者高度为0，那么就是自适应；不给height或者不给maxheight，虚拟滚动直接会关闭）。 如果你数据多而且高度为0或者为空，那么就会卡死，不支持百分比
        -->
        <u-table             
            fixed-columns-roll
            beautify-table
            header-drag-style
            :height="height"
            :row-height="rowHeight"
            :treeConfig="treeConfig"
            use-virtual
            row-id="id"
            border
            ref="treeTableRef">        
            <u-table-column
                 :tree-node="true"
                 prop="name"
                 label="名称"
                 fixed
                 :width="300">   
            </u-table-column>               
            <u-table-column label="备注" prop="content" fixed :width="100">
            </u-table-column>
            <u-table-column label="状态" prop="tempObject" fixed :width="100">
                <template slot-scope="scope">
                    <b-badge class="mr-1" v-if="scope.row.tempObject == '启用'" variant="primary">启用</b-badge>
                    <b-badge class="mr-1" v-else variant="warning">禁用</b-badge>
                </template>
            </u-table-column>           
          <u-table-column align="center" label="操作" fixed :width="300">
            <template slot-scope="scope">
                    <a v-if="scope.row.pid == 0" href="javascript:;" @click="addXtDataDictionary(scope.row,1)" class="btn btn-sm btn-clean btn-icon" title="新建下级">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect x="0" y="0" width="24" height="24"/>
                                    <path d="M19,11 L21,11 C21.5522847,11 22,11.4477153 22,12 C22,12.5522847 21.5522847,
                                    13 21,13 L19,13 C18.4477153,13 18,12.5522847 18,12 C18,11.4477153 18.4477153,11 19,
                                    11 Z M3,11 L5,11 C5.55228475,11 6,11.4477153 6,12 C6,12.5522847 5.55228475,13 5,
                                    13 L3,13 C2.44771525,13 2,12.5522847 2,12 C2,11.4477153 2.44771525,11 3,11 Z M12,
                                    2 C12.5522847,2 13,2.44771525 13,3 L13,5 C13,5.55228475 12.5522847,6 12,6 C11.4477153,
                                    6 11,5.55228475 11,5 L11,3 C11,2.44771525 11.4477153,2 12,2 Z M12,18 C12.5522847,18 13,18.4477153 13,19 L13,21 C13,21.5522847 12.5522847,22 12,22 C11.4477153,22 11,21.5522847 11,21 L11,19 C11,18.4477153 11.4477153,18 12,18 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    <circle fill="#000000" cx="12" cy="12" r="3"/>
                                </g>
                            </svg>
                        </span>  					
                    </a>
                    <a href="javascript:;" @click="updateXtDataDictionary(scope.row)" class="btn btn-sm btn-clean btn-icon" title="编辑">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect x="0" y="0" width="24" height="24"/>
                                    <path d="M1,12 L1,14 L6,14 L6,12 L1,12 Z M0,10 L20,10 C20.5522847,10 21,10.4477153 21,
                                    11 L21,15 C21,15.5522847 20.5522847,16 20,16 L0,16 C-0.55228475,16 -1,15.5522847 -1,
                                    15 L-1,11 C-1,10.4477153 -0.55228475,10 0,10 Z" fill="#000000" fill-rule="nonzero" transform="translate(10.000000, 13.000000) rotate(-225.000000) translate(-10.000000, -13.000000) "/>
                                    <path d="M17.5,12 L18.5,12 C18.7761424,12 19,12.2238576 19,12.5 L19,13.5 C19,
                                    13.7761424 18.7761424,14 18.5,14 L17.5,14 C17.2238576,14 17,13.7761424 17,13.5 L17,
                                    12.5 C17,12.2238576 17.2238576,12 17.5,12 Z M20.5,9 L21.5,9 C21.7761424,9 22,9.22385763 22,
                                    9.5 L22,10.5 C22,10.7761424 21.7761424,11 21.5,11 L20.5,11 C20.2238576,11 20,10.7761424 20,
                                    10.5 L20,9.5 C20,9.22385763 20.2238576,9 20.5,9 Z M21.5,13 L22.5,13 C22.7761424,13 23,13.2238576 23,13.5 L23,14.5 C23,14.7761424 22.7761424,15 22.5,15 L21.5,15 C21.2238576,15 21,14.7761424 21,14.5 L21,13.5 C21,13.2238576 21.2238576,13 21.5,13 Z" fill="#000000" opacity="0.3"/>
                                </g>
                            </svg>
                        </span>
                    </a>  
                    
                    <a  href="javascript:;"  @click="delXtDataDictionary(scope.row)" class="btn btn-sm btn-clean btn-icon" title="删除">
                        <span class="svg-icon svg-icon-primary svg-icon-2x" >
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g transform="translate(12.000000, 12.000000) rotate(-45.000000) translate(-12.000000, -12.000000) translate(4.000000, 4.000000)" fill="#000000">
                                        <rect x="0" y="7" width="16" height="2" rx="1"/>
                                        <rect opacity="0.3" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) " x="0" y="7" width="16" height="2" rx="1"/>
                                    </g>
                                </g>
                            </svg>
                        </span>
                    </a>

                    <a href="javascript:;" @click="getDataDictionaryDetail(scope.row)" class="btn btn-sm btn-clean btn-icon" title="详情">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"/>
                                <path d="M19.2078777,9.84836149 C20.3303823,11.0178941 21,12 21,12 C21,12 16.9090909,18 12,18 C11.6893441,18 11.3879033,17.9864845 11.0955026,17.9607365 L19.2078777,9.84836149 Z" fill="#000000" fill-rule="nonzero"/>
                                <path d="M14.5051465,6.49485351 L12,9 C10.3431458,9 9,10.3431458 9,12 L5.52661464,15.4733854 C3.75006453,13.8334911 3,
                                12 3,12 C3,12 5.45454545,6 12,6 C12.8665422,6 13.7075911,6.18695134 14.5051465,6.49485351 Z" fill="#000000" fill-rule="nonzero"/>
                                <rect fill="#000000" opacity="0.3" transform="translate(12.524621, 12.424621) rotate(-45.000000) translate(-12.524621, -12.424621) " x="3.02462111" y="11.4246212" width="19" height="2"/>
                            </g>
                        </svg>
                        </span>		
                    </a>
                </template>
          </u-table-column>
        </u-table>
      </div>
      <DataDictionaryAdd ref="dataDictionaryAddRef" @change="search"></DataDictionaryAdd><!--采用父窗口关闭传递的方法-->
      <DataDictionaryUpdate ref="dataDictionaryUpdateRef" @change="search"></DataDictionaryUpdate><!--采用父窗口关闭传递的方法-->
      <DataDictionaryDetail ref="dataDictionaryDetailRef"></DataDictionaryDetail>
  </div> 
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import DataDictionaryAdd from "@/view/sys/xt-data-dictionary/xt-data-dictionary-add.vue";
import DataDictionaryUpdate from "@/view/sys/xt-data-dictionary/xt-data-dictionary-update.vue";
import DataDictionaryDetail from "@/view/sys/xt-data-dictionary/xt-data-dictionary-detail.vue";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: { name: "" },
            dataDictionaryList: [],
            props: {
                defaultExpandAll: "1"
            },
            treeConfig: { children: 'children',  expandAll: false, hasChildren: 'hasChildren'},
            sels: [], //当前选框选中的值
            height: 400,
            rowHeight: 40,   // 行高( 注: 如果你这里给行高为50，那么你表格行会出现错乱，不要问为啥，因为你可以看看控制台看节点的高是多少，是55，而你这里给50就有问题！)但是由于我在表格的样式中进行了更改所以这里可以使用相同的高度.
        }
    },
    components: {
        DataDictionaryAdd,
        DataDictionaryUpdate,
        DataDictionaryDetail,
    },
    mounted() {
        this.$nextTick(() => {
           this.height = window.innerHeight-420;           
           // 监听窗口大小变化
           window.onresize = () => {
            this.height = window.innerHeight-420;
           }
        })
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "数据字典" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods: {
        initList() {
            showWating({ renderBody: "tableBody" });
            var params = {};
            params.searchJson = JSON.stringify(this.searchForm);//为form元素     
            apiUtil.query(process.env.VUE_APP_SYS_API + "/xtDataDictionary/list", params).then(({ data }) => {
                let result = JSON.parse(data.data);
                result = this.doListToTree(result, 0);
                // 设置表格数据
                this.$refs.treeTableRef.reloadData(result)
                this.dataDictionaryList = result;//给结果集赋值
                if(this.props.defaultExpandAll === "1"){
                    if(this.dataDictionaryList.length > 0){
                        this.$refs.treeTableRef.setTreeExpansion(this.dataDictionaryList[0], true);//展开一级
                    }
                }else if(this.props.defaultExpandAll === "2"){                    
                    this.toggleRowExpansion(true)
                }else{
                    this.toggleRowExpansion(false)
                }
            });
        },
        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
            console.log("选中的值", sels.map((item) => item.buessid));
        },
        addXtDataDictionary(row,type) {//新建
            if(row){
                this.$refs.dataDictionaryAddRef.showModal(row.buessid,type,row.name)
            }else{
                this.$refs.dataDictionaryAddRef.showModal("0",type,"一级目录")
            }
        },
        updateXtDataDictionary(row) {// 更新
            this.$refs.dataDictionaryUpdateRef.showModal(row.buessid);
        },
        delXtDataDictionary(row) { // 删除            
            // 删除前提示
            this.$confirm("确认删除记录吗?", "提示", { type: "warning", }).then(() => {
                let params = {id:row.buessid};
                apiUtil.delete(process.env.VUE_APP_SYS_API + "/xtDataDictionary/delete",params).then(data => {
                    if (data.data.success) {
                        handleAlert("删除成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("删除失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;        
        },
        toggleRowExpansion(isExpansion) {
            showWating({ renderBody: "tableBody",message:"正在操作中..." });           
            if(isExpansion){
                this.props.defaultExpandAll = "2";
                this.$refs.treeTableRef.setAllTreeExpansion();
            }else{
                this.props.defaultExpandAll = "3";
                this.$refs.treeTableRef.clearTreeExpand();
            }
            closeWating();
        },
        // 获取已经展开的节点
        getTreeExpansionEvent () {
            console.log(this.$refs.treeTableRef.getTreeExpandRecords())
        },
        // 收起展开时触发
        toggleTreeExpand (row, treeExpanded, event) {
            console.log(row, treeExpanded, event)
        },
        search() {
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        getDataDictionaryDetail(row) {
            this.$refs.dataDictionaryDetailRef.showModal(row.buessid);
        },
        doListToTree(list, root){
            const arr = []
            // 1.遍历
            list.forEach((item) => {
                let name = item.name;
                name = name.replace("<font color='#22b9ff' style='font-family: cursive; font-size: larger;'>", "");                
                name = name.replace("<font style='font-family: cursive;font-size: initial;'>", "");
                name = name.replace("</font>", "");
                item.name = name;
                // 2.首次传入空字符串  判断list的pid是否为空 如果为空就是一级节点
                if (item.pid === root) {
                    // 找到之后就要去找item下面有没有子节点  以 item.id 作为 父 id, 接着往下找
                    const children = this.doListToTree(list, item.id)
                    if (children.length > 0) {
                        // 如果children的长度大于0,说明找到了子节点
                        item.children = children
                    }
                    // 将item项, 追加到arr数组中
                    arr.push(item)
                }
            })
            return arr
        },
    }
};
</script>
<style scoped>
@import url('~@/assets/plugins/umy-ui/theme-chalk/u-table.css');
</style>